<template>
  <common-edit-dialog
    :title="dialogTitle"
    :visible.sync="dialogShow"
    @cancel="dialogShow = false"
    @submit="submitForm"
    :button-loading="isPersistenceLoading"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px"
      @submit.native.prevent
    >
      <el-row :gutter="18">
        <el-col :span="24">
          <el-form-item label="策略名称" prop="ruleName">
            <common-input
              v-model="form.ruleName"
              placeholder="默认访问时间策略"
              :maxlength="16"
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="每周操作时间" prop="weekDays">
            <el-checkbox-group v-model="form.weekDays">
              <!-- <el-checkbox label="全部"></el-checkbox> -->
              <el-checkbox label="周一"></el-checkbox>
              <el-checkbox label="周二"></el-checkbox>
              <el-checkbox label="周三"></el-checkbox>
              <el-checkbox label="周四"></el-checkbox>
              <el-checkbox label="周五"></el-checkbox>
              <el-checkbox label="周六"></el-checkbox>
              <el-checkbox label="周日"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>

        <el-col :span="24" style="display: flex; align-items: center">
          <el-form-item label="每日操作时间" prop="beginTime">
            <common-input-number
              :max-length="2"
              class="time-number"
              v-model="form.beginTime"
              placeholder="请输入开始时间"
            />
          </el-form-item>
          <div style="height: 33px; margin: 0 8px">-</div>
          <el-form-item prop="endTime" class="el-form-item-endTime">
            <common-input-number
              :max-length="2"
              class="time-number"
              v-model="form.endTime"
              placeholder="请输入结束时间"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </common-edit-dialog>
</template>

<script>
import { vsittimerule_update } from "@/api/management/configure/index.js";
export default {
  components: {},
  props: {},
  data() {
    let checkTime = (rule, value, callback) => {
      if (this.form.beginTime === "") {
        callback(new Error("请输入开始时间"));
      } else if (
        this.form.beginTime < 0 ||
        this.form.beginTime > 24 ||
        this.form.endTime > 24 ||
        this.form.endTime < 0
      ) {
        callback(new Error("数值范围0-24"));
      } else {
        callback();
      }
    };
    let endCheckTime = (rule, value, callback) => {
      if (this.form.endTime === "") {
        callback(new Error("请输入结束时间"));
      } else if (
        this.form.beginTime < 0 ||
        this.form.beginTime > 24 ||
        this.form.endTime > 24 ||
        this.form.endTime < 0
      ) {
        callback(new Error("数值范围0-24"));
      } else if (this.form.beginTime >= this.form.endTime) {
        callback(new Error("结束时间不能小于或等于开始时间"));
      } else {
        callback();
      }
    };
    return {
      isPersistenceLoading: false,
      dialogTitle: "编辑访问时间策略", // 标题
      dialogShow: false, // 是否显示
      form: {},
      checkList: ["周一"],
      rules: {
        ruleName: [
          {
            required: true,
            message: "请输入策略名称",
            trigger: "blur",
          },
        ],
        weekDays: [
          {
            required: true,
            message: "请选择",
          },
        ],
        beginTime: [
          {
            required: true,
            message: "请输入每日操作开始时间",
            trigger: "blur",
          },
          {
            required: true,
            validator: checkTime,
            trigger: "blur",
          },
        ],
        endTime: [
          {
            required: true,
            message: "请输入每日操作结束时间",
            trigger: "blur",
          },
          {
            required: true,
            validator: endCheckTime,
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    /**
     * 关闭
     */
    close() {
      // this.$refs.form.resetFields();
      this.dialogShow = false;
      this.$emit("refresh");
    },
    /**
     * 显示
     */
    show(data) {
      this.dialogShow = true;
      let weekDays = data.weekDays;
      for (let index in weekDays) {
        if (weekDays[index] == "1") {
          weekDays[index] = "周一";
        }
        if (weekDays[index] == "2") {
          weekDays[index] = "周二";
        }
        if (weekDays[index] == "3") {
          weekDays[index] = "周三";
        }
        if (weekDays[index] == "4") {
          weekDays[index] = "周四";
        }
        if (weekDays[index] == "5") {
          weekDays[index] = "周五";
        }
        if (weekDays[index] == "6") {
          weekDays[index] = "周六";
        }
        if (weekDays[index] == "7") {
          weekDays[index] = "周日";
        }
      }
      data.weekDays = weekDays;
      this.form = data;
    },
    /**
     * 提交
     */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let form = JSON.parse(JSON.stringify(this.form));
          let min;
          for (let index in form.weekDays) {
            if (form.weekDays[index] == "周一") {
              form.weekDays[index] = 1;
            }
            if (form.weekDays[index] == "周二") {
              form.weekDays[index] = 2;
            }
            if (form.weekDays[index] == "周三") {
              form.weekDays[index] = 3;
            }
            if (form.weekDays[index] == "周四") {
              form.weekDays[index] = 4;
            }
            if (form.weekDays[index] == "周五") {
              form.weekDays[index] = 5;
            }
            if (form.weekDays[index] == "周六") {
              form.weekDays[index] = 6;
            }
            if (form.weekDays[index] == "周日") {
              form.weekDays[index] = 7;
            }
          }
          for (var i = 0; i < form.weekDays.length; i++) {
            for (var j = i; j < form.weekDays.length; j++) {
              if (form.weekDays[i] > form.weekDays[j]) {
                min = form.weekDays[j];
                form.weekDays[j] = form.weekDays[i];
                form.weekDays[i] = min;
              }
            }
          }
          form.weekDays = form.weekDays.join(",");
          if (!this.isPersistenceLoading) {
            this.isPersistenceLoading = true;
            vsittimerule_update(form)
              .then((res) => {
                if (res && res.code === 200) {
                  this.$GlobalSuccessMessage("编辑成功");
                  this.close();
                } else {
                  this.$GlobalErrorConfirm("编辑失败", res.msg);
                }
              })
              .finally(() => {
                this.isPersistenceLoading = false;
              });
          }
        }
      });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.time-number {
  width: 100%;
}
::v-deep .el-form-item-endTime {
  .el-form-item__content {
    margin-left: 0 !important;
  }
}
</style>
